<template>
  <div class="pay-container">
    <!-- 生成微信支付二维码 -->
    <div class="erwei">
      <img alt="" :src="qrurl" />
    </div>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-wechat_pay"></use>
    </svg>

    <el-descriptions title="订单详情">
      <el-descriptions-item label="订单号">
        {{ order.order_id }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ order.create_time }}
      </el-descriptions-item>
      <el-descriptions-item label="产品名称">
        {{ order_detail.productName }}
      </el-descriptions-item>
      <el-descriptions-item label="商品描述">
        {{ order_detail.description }}
      </el-descriptions-item>
      <el-descriptions-item label="购买数量">
        {{ order_detail.quantity }}
      </el-descriptions-item>
      <el-descriptions-item label="购买用户">
        {{ order.nickname }}
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        {{ order.user_phonec }}
      </el-descriptions-item>
      <el-descriptions-item label="总价格">
        {{ order.total_fee }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import qr from "qrcode";
import { getorder, payment, orderstatus } from "@/api/pay";
export default {
  async created() {
    let order_id = this.$route.query.order_id;
    if (!order_id) {
      this.$router.push("/vipmanager/charge");
    }
    //
    let res = await Promise.all([getorder(order_id), payment(order_id)]);
    console.log(res);

    //轮训查询
    this.queryorderstatus();
    this.order_detail = res[0].data.data.orderDetail[0];
    this.order = res[0].data.data;
    if (!res[1].data.state) {
      this.$router.push({ name: "preorder" });

      return;
    }

    //进一步提取二维码的 url
    let payUrl = res[1].data.code_url;
    qr.toDataURL(payUrl, (err, baseimg64) => {
      if (err) {
        //如果有错误抛出错误
        this.$messageBox.error(err);
        return;
      }
      //如果正确将地址给data里面的数据展示 图片
      this.qrurl = baseimg64;
    });
  },
  beforeDestroy() {
    clearInterval(this.querysetInterval);
  },
  data() {
    return {
      qrurl: "",
      order_detail: {},
      order: {},
    };
  },

  methods: {
    queryorderstatus() {
      let order_id = this.$route.query.order_id;

      this.querysetInterval = setInterval(async () => {
        let res = await orderstatus(order_id);
        if (res.data.state) {
          this.$router.push({ path: "paySuccess" });
        }
      }, 2000);
    },
  },
};
</script>

<style lang="less">
.pay-container {
  height: 800px;
}
</style>
